<template>
  <div class="home">
    <el-container>
      <el-aside width="200px" style="background: #6699cc">
        <h5 class="aside-title">
          <img :src="imgurl" />
          外卖商家中心
        </h5>
        <el-menu
          router
          unique-opened
          :default-active="active"
          background-color="#6699cc"
          text-color="#fff"
          active-text-color="#409EFF"
        >
          <div v-for="item in roleList" :key="item.index">
            <!-- 可折叠 -->
            <el-submenu v-if="item.children" :index="item.index">
              <template slot="title">
                <i :class="item.icon" style="color:'#fff"></i>
                <span> {{ item.name }}</span>
              </template>
              <el-menu-item-group
                v-for="child in item.children"
                :key="child.index"
              >
                <el-menu-item :index="child.index">
                  {{ child.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 不可折叠 -->
            <el-menu-item v-else :index="item.index">
              <i :class="item.icon" style="color:'#fff"></i>
              <span> {{ item.name }} </span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item><a href="/">账号管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>账号列表</el-breadcrumb-item>
          </el-breadcrumb>
          <p>
            <span >欢迎你 <span style="color: #6ca2d7">{{ username }}</span></span
            ><img @click="imgBtn" :src="imgurl" />
          </p>
        </el-header>
        <el-main>
          <el-card> <router-view class="boxheight"></router-view></el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {checkToken,getaccoundInfor} from "@/apis/users"
export default {
  data() {
    return {
      username:"请重新登录",   //用户名
      imgurl:"#",   //头像图片
      active: "/home/homepages",
      treeList: [
        {
          index: "/home/homepages",
          icon: "el-icon-s-home",
          name: "后台首页",
          role:['super','normal']
        },
        {
          index: "/home/homeorders",
          icon: "el-icon-notebook-1",
          name: "订单管理",
           role:['super','normal']
        },
        {
          index: "3",
          icon: "el-icon-shopping-cart-full",
          name: "商品管理",
           role:['super','normal'],
          children: [
            { index: "/home/productList", name: "商品列表" },
            { index: "/home/addproduct", name: "商品添加" },
            { index: "/home/commodityclas", name: "商品分类" },
          ],
        },
        {
          index: "/home/Storeman",
          icon: "el-icon-sell",
          name: "店铺管理",
           role:['super']
        },
        {
          index: "5",
          icon: "el-icon-user",
          name: "账号管理",
           role:['super'],
          children: [
            { index: "/home/accountlist", name: "账号列表" },
            { index: "/home/addaccount", name: "添加账号" },
            { index: "/home/editpassword", name: "修改密码" },
          ],
        },
        {
          index: "6",
          icon: "el-icon-s-data",
          name: "销售统计",
           role:['super'],
     children: [
            { index: "/home/salestatistics", name: "商品统计" },
            { index: "/home/orderstatistics", name: "订单统计" },
          ],
        },
      ],
    };
  },
  created() {
    this.active = this.$route.path;
    //token的ajax
    checkToken({token:localStorage.token}).then((res)=>{
    if (res.data.code==0) {
      this.username=localStorage.acc
    }else{this.username="请重新登陆"}
    })
 //获取用户的头像
 getaccoundInfor({id:localStorage.id}).then((res)=>{
  //  console.log(res);
   this.imgurl=res.data .accountInfo.imgUrl    //头像
 this.$bus.on('handleAvatarSuccess',(res)=>{
  //  console.log(res,'传来的数据');
   let olderimg=this.imgurl
   let  serverIP=olderimg.substring(0,olderimg.lastIndexOf('/')+1)
   this.imgurl=serverIP+res.imgUrl
  //  console.log(this.imgurl);
 })
 }) 
 },

 //计算属性
 computed:{            
//根据用户的级别来显示treelist
//要渲染新的数组来显示
roleList(){
  return this.treeList.filter(v=>v.role.includes(localStorage.role))
}

 },
 methods:{
    imgBtn(){
    this.$router.push('/home/manger')
  },
 }
};
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.home {
  display: flex;
  width: 100%;
  height: 100%;
}


.el-menu {
  border: none;
}
.el-main {
  background-color: #f0f2f5;
}
.aside-title {
  margin-bottom: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-top: 20px;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
.el-menu-item i {
  color: #fff;
}

.el-submenu__title i {
  color: #fff;
}
</style>